<template>
	<div class="rank">
		<div id="headbutn">
			<button :class="[actived == 1 ? 'btn-active' : 'btn-unactive']" class="button button--aylen" @click='toactive(1)'>日排行</button>
			<button :class="[actived == 4 ? 'btn-active' : 'btn-unactive']" class="button button--aylen" @click='toactive(4)'>月排行</button>
		</div>
		<div class="wrap">
			<div class="gradient-head">
				<select v-if='actived == 1' v-model="selected" v-on:change="getData({subt: selected})">
					<option v-bind:value="1" >本日可疑探测包排行</option>
					<option v-bind:value="2">本日可疑主机存活探测包排行</option>
					<option v-bind:value="3">本日可疑主机服务探测包排行</option>
				</select>
				<select v-else v-model="selected" v-on:change="getData({subt: selected})">
					<option v-bind:value="4">本月可疑探测包排行</option>
					<option v-bind:value="5">本月可疑主机存活探测包排行</option>
					<option v-bind:value="6">本月可疑主机服务探测包排行</option>
				</select>
			</div>
			<div class="chart_wrap">
				<loading v-show= '!show'></loading>	
				<transition name="fade" mode="out-in">
				<div class="pic-wrap base-border" v-show='show'>
					<div id="rankline"></div>
				</div>
				</transition>
				<detailModal :detail="detail"></detailModal>
			</div>
		</div>
	</div>
</template>
<script>
	import loading from 'components/common/loading'
	import detailModal from 'components/common/detailModal'	
	import logManageService from 'services/logManageService'

	export default {
		components: {
			loading,
			detailModal
		},
		data() {
			return {
				selected: 1,
				actived: 1,
				rankData: [],
				show: false,
				detail: {
					mac: '',
					desc: ''
				},
			}
		},
		created() {
			this.getData({subt: 1})		
		},
		mounted() {
			this.loadPic()
		},
		watch: {
			rankData: function() {
        this.loadPic()
			}		
		},
		computed: {
			xaxis: function() {
				let x_temp = [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ']
				for(let i = 0; i < this.rankData.length; i++) {
					x_temp[i]= this.rankData[i].desc ? this.rankData[i].desc : this.rankData[i].x
				}
				return x_temp
			},
			yaxis: function() {
				let y_temp = []
				for(let i = 0; i < this.rankData.length; i++) {
					y_temp[i] = {
						y: Number(this.rankData[i].y),
						desc: this.rankData[i].desc,
						mac: this.rankData[i].x
					}
				}
				return y_temp
			}
		},
		methods: {
			toactive: function(n) {
				this.actived = n
				this.selected = n
				this.getData({subt: n})
			},
			getData: function(params) {
				logManageService.getStatistic(params)
					.then((res) => {
						if (res.errcode === 0) {	
							this.show = true
							this.rankData = res['4'][params.subt].map((item) => {
								if ([1, 2, 3].indexOf(params.subt)) {
									return {
										x: item.attack_source,
										y: item.count,
										desc: item.description
									}
								} else {
									return item
								}
							})
						}
					})
			},
			loadPic() {
			  let _this = this
				Highcharts.setOptions({
					colors: ['#eb6877'],
					credits: {enabled: false},
					exporting: {enabled: false},
					legend: {enabled: false}
				})
				Highcharts.chart('rankline', {
					chart: {type: 'bar'},
					title: {text: null},
					yAxis: {
						title: {text: '可疑探测包（个）'},
						lineWidth: 1,
						allowDecimals: false
					},
					xAxis: {
						max: 9, // 定义Y轴 最大值  
						min: 0, // 定义最小值  
						categories: this.xaxis,
						tickInterval: 1
					},
					tooltip: {
						valueSuffix: '个'
					},
					plotOptions: {
						column: {
							pointPadding: 0,
							pointMargin: 0,
							borderWidth: 0
						}
					},
					series: [{
						name: '包',
						data: this.yaxis,
						cursor: 'pointer',
            events: {
							click: (e)=> {
								_this.detail={
									mac: e.point.mac,
									desc: e.point.desc ? e.point.desc : '-'
								}
								$('#detailModel').modal('show')
							}
            }
					}],
					lang: {
						noData: "暂无数据"
					},
					noData: {
						style: {
							fontSize: '15px',
							color: '#999999'
						}
					}
				})
			}
		}
	}
</script>
<style scoped lang="less">
	.rank{
		border-bottom: 1px dashed #E0E0E0;
	}
	#headbutn {
		font-size: 14px;
		margin: 10px 0;
	}
	
	.button {
		padding: 0 10px;
		height: 22px;
		border-radius: 3px;
		font-size: 12px;
		margin-right: 10px;
	}
	.wrap {
	  margin-bottom: 40px;
		height: 300px;
		position: relative;
	
	}	
	.title {
		height: 30px;
		line-height: 30px;
		padding-left: 15px;
	}
	
	select {
		padding:4px;
	}

	.pic-wrap {
		width: 100%;
		height: 280px;
		padding: 5px 15px 0px;
		box-sizing: border-box;
		border: 1px solid #e4e4e4;
	}
	
	#rankline {
		width: 1100px;
		height: 270px;
		box-sizing: border-box;
	}
</style>